<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>参数列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片视图 -->
		<el-card>
			<!-- 头部警告区域 -->
			<el-alert
			title="注意:只允许为第三级分类设置相关参数"
			type="warning" :closable="false" show-icon>
		</el-alert>

		<!-- 选择商品分类区域 -->
		<el-row class="cat_opt">
			<span>选择商品分类:</span>
			<el-cascader
			v-model="selectedKeys"
			:options="cateList"
			:props="cateProps"
			@change="handleChange"></el-cascader>
		</el-row>

		<!-- tab页签 -->
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<!-- 添加动态参数面板 -->
			<el-tab-pane label="动态参数" name="many">
				<el-button size="mini" type="primary" :disabled="isBtnDisabled" @click="addDialogVisible =true">添加参数</el-button>

				<!-- 动态参数表格 -->
				<el-table :data="manyTableData">
					<el-table-column type="expand"></el-table-column>
					<el-table-column type="index"></el-table-column>
					<el-table-column label="参数列表名称" prop="attr_name"></el-table-column>
					<el-table-column label="操作">
						<template v-slot="scope">
							<el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
							<el-button size="mini"  type="danger" icon="el-icon-delete">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<!-- 添加静态属性面板 -->
			<el-tab-pane label="静态属性" name="only">
				<el-button size="mini" type="primary" :disabled="isBtnDisabled" @click="addDialogVisible =true">添加属性</el-button>
				<!-- 静态参数表格 -->
				<el-table :data="onlyTableData">
					<el-table-column type="expand"></el-table-column>
					<el-table-column type="index"></el-table-column>
					<el-table-column label="参数列表名称" prop="attr_name"></el-table-column>
					<el-table-column label="操作">
						<template v-slot="scope">
							<el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
							<el-button size="mini"  type="danger" icon="el-icon-delete">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</el-card>	

	<!-- 添加参数对话框 -->
	<el-dialog
	:title="'添加'+titleText"
	:visible.sync="addDialogVisible"
	width="50%"
	@close="addDialogClosed">
	<el-form :model="addForm" :rules="rules" ref="addFormRef" label-width="100px">
		<el-form-item :label="titleText" prop="attr_name">
			<el-input v-model="addForm.attr_name"></el-input>
		</el-form-item>
	</el-form>
	<span slot="footer" class="dialog-footer">
		<el-button @click="addDialogVisible = false">取 消</el-button>
		<el-button type="primary" @click="addParams">确 定</el-button>
	</span>
</el-dialog>
</div>
</template>

<script>
	export default{
		data(){
			return {
				cateList:[],
				// 级联选择框配置对象
				cateProps:{
					value:'cat_id',
					label:'cat_name',
					children:'children',
					expandTrigger:'hover'
				},
				// 级联选择框双向绑定数组
				selectedKeys:[],
				// 被激活页签的名称
				activeName:'many',
				// 动态参数数据
				manyTableData:[],
				// 静态属性数据
				onlyTableData:[],
				// 控制添加对话框的显示与隐藏
				addDialogVisible:false,
				addForm:{
					attr_name:''
				},
				rules:{
					attr_name: [
					{ required: true, message: '请输入参数名称', trig参数名称ger: 'blur' },
					{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
					]
				}
			}
		},
		methods:{
			async getCateList(){
				const{data:res}=await this.$http.get('categories')
				if(res.meta.status !==200) return this.$message.error('获取商品数据失败')
					this.cateList=res.data
				// console.log(this.cateList)
			},
			// 级联选择框变化触发的事件
			handleChange(){
				this.getParamsDate()
			},
			handleClick(){
				// console.log(this.activeName)
				this.getParamsDate()
			},
			async getParamsDate(){
				if(this.selectedKeys.length !==3) return this.selectedKeys=[]
					// console.log(this.selectedKeys)
				// 根据所选分类id，所处面板，获取对应数据
				const {data:res}=await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:this.activeName}})

				if(res.meta.status !==200)  return this.$message.error('获取参数失败')
					// console.log(res.data)
				if(this.activeName==="many"){
					this.manyTableData=res.data
				}else{
					this.onlyTableData=res.data
				}
			},
			// 监听对话框的关闭事件
			addDialogClosed(){
				this.$refs.addFormRef.resetFields()
			},
			// 点击按钮添加参数
			 addParams(){
				this.$refs.addFormRef.validate(async valid=>{
					if(!valid) return
					const {data:res}=await this.$http.post(`categories/${this.cateId}/attributes`,{attr_name:this.addForm.attr_name,attr_sel:this.activeName})
					console.log(res)
					if(res.meta.status !==200) return this.$message.error('获取参数失败')
						this.getParamsDate()
						this.addDialogVisible=!this.addDialogVisible

				})
			}
		},
		created(){
			this.getCateList()
		},
		computed:{
			isBtnDisabled(){
				if (this.selectedKeys.length !==3) return true
					return false
			},
			cateId(){
				if(this.selectedKeys.length ==3) return this.selectedKeys[2]
					return null
			},
			titleText(){
				if(this.activeName==='many'){
					return '动态参数'
				}
				return '静态属性'
			}
		}
	}
</script>

<style scoped>
.cat_opt{
	margin:15px 0;
}
</style>